<div class="content-section introduction">
    <div class="feature-intro">
        <h1>TreeTable <span>Size</span></h1>
        <p>In addition to a regular table, alternatives with alternative sizes are available.</p>
    </div>
    <app-demoActions github="treetable" stackblitz="treetablesize-demo"></app-demoActions>
</div>

<div class="content-section implementation">
<div class="card">
    <p-treeTable [value]="files1" [columns]="cols" [reorderableColumns]="true" styleClass="p-treetable-sm">
        <ng-template pTemplate="caption">
            Small Table
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" ttReorderableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                    {{rowData[col.field]}}
                </td>
            </tr>            
        </ng-template>
    </p-treeTable>
</div>

<div class="card">
    <p-treeTable [value]="files2" [columns]="cols" [reorderableColumns]="true">
        <ng-template pTemplate="caption">
            Normal Table
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" ttReorderableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                    {{rowData[col.field]}}
                </td>
            </tr>            
        </ng-template>
    </p-treeTable>
</div>

<div class="card">
    <p-treeTable [value]="files3" [columns]="cols" [reorderableColumns]="true" styleClass="p-treetable-lg">
        <ng-template pTemplate="caption">
            Large Table
        </ng-template>
        <ng-template pTemplate="header" let-columns>
            <tr>
                <th *ngFor="let col of columns" ttReorderableColumn>
                    {{col.header}}
                </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns">
            <tr>
                <td *ngFor="let col of columns; let i = index">
                    <p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"></p-treeTableToggler>
                    {{rowData[col.field]}}
                </td>
            </tr>            
        </ng-template>
    </p-treeTable>
</div>
</div>

<div class="content-section documentation">
<p-tabView>
    <p-tabPanel header="Source">
        <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/treetable" class="btn-viewsource" target="_blank">
            <span>View on GitHub</span>
        </a>
        <a href="https://stackblitz.com/edit/primeng-treetablesize-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
            <span>Edit in StackBlitz</span>
        </a>

<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;div class="card"&gt;
    &lt;p-treeTable [value]="files1" [columns]="cols" [reorderableColumns]="true" styleClass="p-treetable-sm"&gt;
        &lt;ng-template pTemplate="caption"&gt;
            Small Table
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="header" let-columns&gt;
            &lt;tr&gt;
                &lt;th *ngFor="let col of columns" ttReorderableColumn&gt;
                    &#123;&#123;col.header&#125;&#125;
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
            &lt;tr&gt;
                &lt;td *ngFor="let col of columns; let i = index"&gt;
                    &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                    &#123;&#123;rowData[col.field]&#125;&#125;
                &lt;/td&gt;
            &lt;/tr&gt;            
        &lt;/ng-template&gt;
    &lt;/p-treeTable&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;p-treeTable [value]="files2" [columns]="cols" [reorderableColumns]="true"&gt;
        &lt;ng-template pTemplate="caption"&gt;
            Normal Table
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="header" let-columns&gt;
            &lt;tr&gt;
                &lt;th *ngFor="let col of columns" ttReorderableColumn&gt;
                    &#123;&#123;col.header&#125;&#125;
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
            &lt;tr&gt;
                &lt;td *ngFor="let col of columns; let i = index"&gt;
                    &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                    &#123;&#123;rowData[col.field]&#125;&#125;
                &lt;/td&gt;
            &lt;/tr&gt;            
        &lt;/ng-template&gt;
    &lt;/p-treeTable&gt;
&lt;/div&gt;

&lt;div class="card"&gt;
    &lt;p-treeTable [value]="files3" [columns]="cols" [reorderableColumns]="true" styleClass="p-treetable-lg"&gt;
        &lt;ng-template pTemplate="caption"&gt;
            Large Table
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="header" let-columns&gt;
            &lt;tr&gt;
                &lt;th *ngFor="let col of columns" ttReorderableColumn&gt;
                    &#123;&#123;col.header&#125;&#125;
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/ng-template&gt;
        &lt;ng-template pTemplate="body" let-rowNode let-rowData="rowData" let-columns="columns"&gt;
            &lt;tr&gt;
                &lt;td *ngFor="let col of columns; let i = index"&gt;
                    &lt;p-treeTableToggler [rowNode]="rowNode" *ngIf="i == 0"&gt;&lt;/p-treeTableToggler&gt;
                    &#123;&#123;rowData[col.field]&#125;&#125;
                &lt;/td&gt;
            &lt;/tr&gt;            
        &lt;/ng-template&gt;
    &lt;/p-treeTable&gt;
&lt;/div&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;Component,OnInit&#125; from '@angular/core';
import &#123;NodeService&#125; from '../../service/nodeservice';
import &#123;TreeNode&#125; from 'primeng/api';

@Component(&#123;
    templateUrl: './treetablesizedemo.html'
&#125;)
export class TreeTableSizeDemo implements OnInit &#123;

    files1: TreeNode[];

    files2: TreeNode[];

    files3: TreeNode[];

    cols: any[];

    constructor(private nodeService: NodeService) &#123; &#125;

    ngOnInit() &#123;
        this.nodeService.getFilesystem().then(files => this.files1 = files);
        this.nodeService.getFilesystem().then(files => this.files2 = files);
        this.nodeService.getFilesystem().then(files => this.files3 = files);

        this.cols = [
            &#123; field: 'name', header: 'Name' &#125;,
            &#123; field: 'size', header: 'Size' &#125;,
            &#123; field: 'type', header: 'Type' &#125;
        ];
    &#125;
&#125;
</app-code>   
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-treetablesize-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>